<template>
    <main-layout>
        <van-nav-bar
            title="购物车"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />        
        <van-card
            :price="item.price*item.num"
            :title="item.title"
            :thumb="item.path"
            v-for="item in list"
            :key="item.id"
        > 
            <template #tags>
                <van-checkbox v-model="item.cheched" @click="changeEvt"></van-checkbox>
                <van-tag plain type="danger">{{item.type}}</van-tag>
            </template>
            <template #footer>
                <van-stepper v-model="item.num" @change="changeNum"/>
                <van-button @click="deleteEvt(item.id)" size="mini">删除</van-button>
            </template>
            </van-card>                
        <van-submit-bar :price="amount*100" button-text="提交订单" @submit="toAddressEvt">
            <van-checkbox v-model="allchecked" @click="allChechedEvt">全选</van-checkbox>
        </van-submit-bar>    
    
    </main-layout>
</template>
<script>
export default {
    computed:{
        amount(){
            let s=0
            for(let i=0;i<this.list.length;i++){
                if(this.list[i].cheched){
                    s=s+this.list[i].num*this.list[i].price
                }
            }
            return s
        },
    },
    data() {
        return {
            list:[],
            allchecked:false
        }
    },
    created(){
        console.log(this.$store.getters['common/getShoppingInfo'])
        //深拷贝
        this.list = JSON.parse(JSON.stringify(this.$store.getters['common/getShoppingInfo'])) || []      
    },
    methods: {
        //返回上一级
        onClickLeft(){
            this.$router.go(-1)
        },
        //点击提交订单
        toAddressEvt(){
            //如果没有勾选商品，提示
            let is=this.list.every(function(item){
                return item.cheched===false
            })
            if(is){
                this.$toast({
                    message: '请选择商品',
                    position: 'bottom',
                })
                return
            }
            //把勾选到的商品储存下来
            let arr=[]
            for(let i=0;i<this.list.length;i++){
                if(this.list[i].cheched){
                    arr.push(this.list[i])
                }
            }
            this.$store.commit('common/setOrderInfo',arr)
            this.$router.push('/address')
        },
        //改变购物车商品数量后储存到状态管理器中
        changeNum(){
            this.$store.commit('common/setShoppingInfo',this.list)
        },
        //删除商品
        deleteEvt(id){
            let index=this.list.findIndex(function(item){
                return item.id===id
            })
            this.list.splice(index,1)
            this.$store.commit('common/setShoppingInfo',this.list)
        },
        //全选
        allChechedEvt(){
            this.list.forEach((item)=>{
                 item.cheched=this.allchecked
            })
        },
        //单选
        changeEvt(){
            this.allchecked=this.list.every((item)=>{
                return item.cheched===true
            })
        }
    },
}
</script>
<style lang="less" scoped>
.van-card{
    margin-top: 20px !important;
    background: #ffffff;
    .van-card__header{

        .van-card__content{
            div{
                position: relative;
                .van-checkbox{
                    position:absolute;
                    right: 0;
                    top: 30px;
                }
                span{
                    line-height: 20px;
                }
            }
        }
    }
}
</style>